let index = 1

const moveTo = e =>{
    showBox(index = e)
}
const changeP = e =>{
    showBox(index += e)
}
const showBox = e =>{
    const imgs = document.querySelectorAll("img");
    const points = document.querySelectorAll(".box-points span");
    (e > imgs.length) ? (index = 1) : null;
    (e < 1 ) ? (index = imgs.length) : null;

    for (let img of imgs){
        img.style.opacity = "0";
    }
    for (let point of points){
        point.style.width = "8px";
    }
    imgs[index - 1].style.opacity = "1";
    points[index - 1].style.width = "26px";
};

showBox();

const box =document.querySelector(".box");
const controls = document.querySelector(".box-controls")
    box.onmouseover = () =>{
        controls.style.opacity = "1"
    }
    box.onmouseleave = () =>{
        controls.style.opacity = "0"
    }